* {
    padding: 0;
    margin: 0;
}

.contatier {
    width: 1000px;
    margin: 0 auto;
}

li {
    display: inline-block;
}
ul {
    margin-bottom: 0px!important;
}

.dspNone {
    display: none;
}


@media screen and (max-width: 768px) {
    .contatier {
        width: 728px;
    }
    header > div img {
        width: 100%;
    }
    main .section-one .two div:nth-of-type(2), main .section-two .one div:nth-of-type(2) {
        width: 88px!important;
    }
    main .section-one .three div:first-of-type ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    main .section-one .three div:first-of-type ul li {
        flex: 1;
        max-width: 196px;
        min-width: 196px;
    }
    main .section-two .four ul li div:last-of-type {
        width: 54%!important;
    }
    main .section-two .four ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    main .section-two .four > ul > li {
        margin-left: 20px;
        margin-right: 20px;
    }
    main .section-two .four > ul > li > div:first-of-type ul {
        padding: 18% 14%!important;
    }
    main .section-two .four > ul > li > div:first-of-type .click-pic {
        width: 70%!important;
    }
    footer {
        padding-bottom: 30px!important;
    }
    footer div .one {
        padding: 20px 0!important;
    }
    footer div .two ul li {
        display: flex;
    }
    footer div .two ul li:nth-of-type(3) span:first-of-type, footer div .two ul li:nth-of-type(5) span:first-of-type {
        margin-right: 18px;
    }
    footer div .two ul li span:first-of-type {
        margin-right: 10px;
    }
}

@media screen and (max-width: 730px) {
    
    .contatier {
        width: 100%;
        
        .logo-pic{
            zoom: 0.6;
        }
    
    }

    .section-one .three, .section-two .three {
        .btn-out {
            width: 60%;
            margin: 0 auto;
            height: 70px;
            .btn {
                width: 100%;
                height: 100%;
                max-width: 270px;
                min-width: 258px;
                background: url(../img/sprite.png);
                background-position: 12px -124px;
                background-size: 100% 950%;
                p {
                    font-size: 20px;
                    font-style: italic;
                    position: relative;
                    top: 0;
                    line-height: 70px;
                }
            }
        }
    }

    main{
        .section-one .three .btn, .section-two .three .btn{
            // width: 260px!important;
            zoom: 0.9;
        }

        .section-one{
            .one{
                p:last-of-type{
                    color: #fff;
                    a{
                        font-size: 12px!important;
                        text-decoration:underline;
                    }
                }
            }
            .three{
                div:first-of-type{
                    ul{
                        li{
                            max-width: 30%;
                            min-width: 30%;

                            p{
                                font-size: 12px;
                            }
                        }
                        li>span{
                            span{
                                zoom: 0.7;
                                top: -228px!important;
                                left: 50%!important;
                                transform: translateX(-50%);
                            }
                        }
                    }
                }

            }
        }

        .section-two{
            .two{
                p{
                    font-size: 14px!important;
                }
            }
            .three{
                .text{
                    a{
                        font-size: 14px!important;
                        text-decoration:underline;
                    }
                    p{
                        font-size: 12px!important;
                    }
                }
            }
            .four{
                ul{
                    .first-list::before {
                        top: 15px!important;
                    }
                    li{
                        div:first-of-type{
                            .click-pic {
                                width: 48%!important;
                                height: 66%;
                            }
                            >img{
                                height: 150px;
                            }
                            > span{
                                zoom: 0.6;
                            }
                            >p{
                                top: 80px!important;
                                font-size: 12px;
                                width: 56%!important;
                            }
                        }
                        div:nth-of-type(2) {
                            top: -55%!important;
                        }
                        div:last-of-type{
                            width: 70%!important;
                            p{
                                // todo
                            }
                            > span {
                                width: 100%!important;
                                max-width: 222px;
                                min-width: 100px;
                                background-position: -9px 92px !important;
                                background-size: 186% 1300%!important;
                                text-align: center;
                                padding-left: 0!important;
                                zoom: 1;
                            }
                        }
                    }
                }
            }
        }
    } 

    footer {
        div {
            .two {
                ul {
                    li:nth-of-type(3), li:nth-of-type(5) {
                        span:first-of-type {
                            width: 54px;
                            margin-right: 7px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 320px) and (max-width: 520px) {
    main .section-two .four ul li {
        width: 60%!important;
    }
    footer {
        background-size: 300% 100%;
    }
}

header {
    width: 100%;
    background-image: url(../img/banner_bg03.jpg);
    background-repeat: no-repeat;
    background-position: center;
    // background-size: 100% 100%;
    nav {
        // padding-top: 20px;
        .logo-pic {
            width: 290px;
            height: 60px;
            background: url(../img/sprite.png);
            background-position: 0px 250px;
        }
    }
}

main {
    width: 100%;
    height: 100%;
    background-color: #2e4562;
    overflow-x: hidden;
    .section-one .two, .section-two .one {
        // width: 100%;
        // margin: 0 auto;
        position: relative;
        img {
            width: 80%;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        // div {
        //     margin: 0 auto;
        //     display: inline-block;
        //     background: url(../img/sprite.png);
        //     &:first-of-type, &:last-of-type {
        //         width: 234px;
        //         height: 70px;
        //         background-position: 0px 522px;
        //     }
        //     &:first-of-type {
        //     }
        //     &:nth-of-type(2) {
        //         // width: 88px;
        //         width: 64px;
        //         height: 54px;
        //         background-position: -201px 674px;
        //         position: absolute;
        //         top: -36px;
        //         left: 50%;
        //         transform: translateX(-50%);
        //     }
        //     &:nth-of-type(3) {
        //         width: 253px;
        //         height: 70px;
        //     }
        //     &:last-of-type {
        //         -moz-transform:scaleX(-1);
        //         -webkit-transform:scaleX(-1);
        //         -o-transform:scaleX(-1);
        //         transform:scaleX(-1);
        //         /*兼容IE*/
        //         filter:FlipV;
        //     }
        // }
    }
    .section-one .three, .section-two .three {
        .btn {
            width: 270px;
            height: 70px;
            // margin: 0 auto;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            background: url(../img/sprite.png);
            background-position: 4px 590px;
            p {
                font-size: 20px;
                font-style: italic;
                position: relative;
                // left: -6px;
                top: 12px;
                text-align: center;
            }
        }
    }
    .section-one {
        margin-bottom: 50px;
        .one {
            width: 100%;
            padding-top: 20px;
            margin-bottom: 50px;
            p {
                text-align: center;
                &:first-of-type {
                    color: #c7dbdf;
                    font-style: italic;
                }
                &:last-of-type {
                    color: #fff;
                    a {
                        color: #fff;
                    }
                }
            }
        }
        .two {
            div:nth-of-type(3) {
                background-position: -6px 383px;
            }
        }
        .three {
            margin-top: 40px;
            div {
                &:first-of-type {
                    ul {
                        width: 100%;
                        li {
                            width: 192px;
                            display: inline-block;
                            padding: 0 2px;
                            > span {
                                // display: block;
                                position: relative;
                                img {
                                    width: 100%;
                                }
                                span {
                                    width: 96px;
                                    height: 96px;
                                    background: url(../img/sprite.png);
                                    background-position: 0px -30px;
                                    position: absolute;
                                    top: -176px;;
                                    left: 44px;
                                }
                            }
                            p {
                                width: 90%;
                                color: #fff;
                                text-align: center;   
                            }
                        }
                    }
                }
            }
            
        }
    }
    .section-two {
        .one {
            div:nth-of-type(3) {
                background-position: 0px 315px;
            }
        }
        .two {
            p {
                color: #a4c3e4;
                text-align: center;
                font-style: italic;
                font-size: 20px;
                strong {
                    color: #fff;
                }
            }
        }
        .three {
            .text {
                text-align: center;
                a {
                    color: #fff;
                    font-size: 18px;
                }
                p {
                    color: #a4c3e4;
                }
            }
        }
        .four {
            // .first-list::before {
            //     content: "";
            //     display: block;
            //     width: 0;
            //     height: 0;
            //     border-width: 0 10px 10px;
            //     border-style: solid;
            //     border-color: transparent transparent rgba(0,0,0,0.4);
            //     position: absolute;
            //     top: 18px;
            //     left: 50%;
            //     transform: translateX(-50%) rotate(180deg);
            //     z-index: 2;
            // }
            > ul {
                width: 90%;
                margin: 0 auto;
                padding: 30px 0;

                > li {
                    width: 32%;
                    list-style: none;
                    margin-bottom: 40px;
                    position: relative;
                    
                    > div {
                        position: relative;
                        overflow: hidden;

                        &:first-of-type {
                            > img, > span, > p {
                                left: 50%;
                                transform: translateX(-50%);
                            }
                            > img {
                                position: relative;
                            }
                            .click-pic {
                                width: 50%;
                                // height: 66%;
                                position: absolute;
                                top: 16%;
                            }
                            > span {
                                width: 84px;
                                height: 84px;
                                background: url(../img/sprite.png);
                                background-position: -97px -30px;
                                position: absolute;
                                top: 44px;
                            }
                            ul {
                                position: absolute;
                                top: 0;
                                display: flex;
                                flex-wrap: wrap;
                                width: 100%;
                                /* margin: 0 auto; */
                                padding: 12% 24%;
                                li {
                                    flex: 1;
                                    width: 50%;
                                    max-width: 50%;
                                    min-width: 50%;
                                    .pic {
                                        width: 70px;
                                        height: 60px;
                                        display: inline-block;
                                        background: url(../img/45578@2x.png);
                                        background-size: 210% 218%;
                                    }
                                    &:first-of-type {
                                        .pic {
                                            background-position: 0 0;
                                        }
                                    }
                                    &:nth-of-type(2) {
                                        .pic {
                                            background-position: -72px 0px;
                                        }
                                    }
                                    &:nth-of-type(3) {
                                        .pic {
                                            background-position: 0 -64px;
                                        }
                                    }
                                    &:last-of-type {
                                        .pic {
                                            background-position: -72px -62px;
                                        }
                                    }
                                }
                            }
                            p {
                                position: absolute;
                                
                                color: #a4c3e4;
                                width: 60%;
                                text-align: center;
                            }
                            .text-1 {
                                top: 164px
                            }
                            .text-2 {
                                top: 140px;
                            }
                        }
                        &:nth-of-type(2) {
                            width: 172%;
                            max-width: 300px;
                            padding: 20px 0;
                            color: #fff;
                            border-radius: 16px;
                            text-align: center;
                            background-color: rgba(0, 0, 0, 0.4);
                            position: absolute;
                            top: -41%;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                        &:last-of-type {
                            width: 40%;
                            margin: 0 auto;
                            overflow: hidden;
                            p {
                                text-align: center;                            
                            }
                            p:first-of-type {
                                color: #fff;
                                text-decoration: line-through;
                            }
                            p:last-of-type {
                                color: #ffdf7d;
                            }
                            span {
                                display: inline-block;
                                width: 222px;
                                height: 38px;
                                background: url(../img/sprite.png);
                                background-size: 80% 1380%;
                                color: #1f1f1f;
                                /* text-align: center; */
                                padding-left: 30px;
                                line-height: 34px;
                                cursor: pointer;
                            }
                            .buy-btn {
                                background-position: -4px 97px;
                            }
                            .bought-btn {
                                background-position: -9px 55px;
                            }
                        }
                    }
                }
            }
        }
    }
}


footer {
    width: 100%;
    background-image: url(../img/footer_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 60px;
    div {
        .one {
            // width: 542px;
            // margin: 0 auto;
            padding: 40px 0;
            position: relative;
            img {
                width: 60%;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }
            // div {
            //     margin: 0 auto;
            //     display: inline-block;
            //     background: url(../img/sprite.png);
            //     &:first-of-type, &:last-of-type {
            //         width: 166px;
            //         height: 50px;
            //         background-position: 0px 444px;
            //     }
            //     &:first-of-type {
            //     }
            //     &:nth-of-type(2) {
            //     }
            //     &:nth-of-type(3) {
            //         width: 198px;
            //         height: 48px;
            //         background-position: 0px 190px;
            //     }
            //     &:last-of-type {
            //         -moz-transform:scaleX(-1);
            //         -webkit-transform:scaleX(-1);
            //         -o-transform:scaleX(-1);
            //         transform:scaleX(-1);
            //         /*兼容IE*/
            //         filter:FlipV;
            //     }
            // }
        }
        .two {
            ul {
                li {
                    // width: 100%;
                    // padding-left: 50px;
                    padding: 0 20px;
                    span {
                        display: inline-block;
                        vertical-align: bottom;
                        &:first-of-type {
                            width: 29px;
                            height: 22px;
                            background: url(../img/sprite.png);
                            background-position: -486px 425px;
                        }
                    }
                }
            }
        }
    }
}